  .fade-enter-active {
    animation-name: fade-in;
    animation-duration: .5s;
  }
  .fade-leave-active {
    animation-name: fade-out;
    animation-duration: .5s;
  }

  @keyframes fade-in  {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  // loading样式
  @keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }

  // opacity样式
  @keyframes opacity {
    0%   {opacity: 1;}
    10%  {opacity: 0.9;}
    20%  {opacity: 0.8;}
    30%  {opacity: 0.7;}
    40%  {opacity: 0.6;}
    50%  {opacity: 0.5;}
    60%  {opacity: 0.6;}
    70%  {opacity: 0.7;}
    80%  {opacity: 0.8;}
    90%  {opacity: 0.9;}
    100% {opacity: 0.95;}
  }
  
  @keyframes bar-loading {
    0% {
      width:60%
    }
    50% {
      width:100%
    }
    100% {
      width:60%
    }
  }
  